<template>
  <div class="container">
    <div class="title">数据库设置</div>
    <div class="flex-column fields">
      <div class="flex-row field">
        <div class="field-name">数据库目录</div>
        <div class="field-input">
          <input class="field-value" type="text" v-model="data.path" />
        </div>
      </div>
    </div>
    <div class="line"></div>
    <div class="flex-row action">
      <div class="save" @click="save">保存</div>
    </div>
  </div>
</template>

<script setup name="KeyIndex">
import { api } from "@/api/wechat/public"

const data = ref({path: ''})

const dbParams = {apiKey: 'get_db'}
api(dbParams).then(res => {
  data.value.path = res.data
})

async function save(event){
  let target = event.currentTarget
  target.style.opacity = 0.5
  const saveParams = {apiKey: 'set_db', body: {
    path: data.value.path
  }}
  await api(saveParams)
  target.style.opacity = 1
}
</script>

<style scoped lang="scss">
  .container {
    height: 400px;
    width: 800px;
    margin: 0 auto;
    margin-top: 40px;
    border-style: solid;
    border-width: 1px;
    border-color: #eeeeee;
    border-radius: 10px;
    padding: 40px;

    .title {
      margin-top: 40px;
      margin-bottom: 30px;
      font-size: 20px;
      font-weight: 400;
      line-height: 1;
    }

    .fields {
      gap: 20px;
      justify-content: flex-start;
      align-items: flex-start;

      .field {
        gap: 10px;
        margin-left: 20px;

        .field-name {
          font-size: 14px;
          font-weight: 300;
          width: 200px;
        }
        .field-input {
          .field-value {
            border-style: solid;
            border-color: #dddddd;
            border-width: 1px;
            border-radius: 3px;
            outline: 0;
            height: 30px;
            width: 400px;
          }
        }
      }
    }
    
    .line {
      margin-top: 100px;
      width: 100%;
      height: 1px;
      background-color: #dddddd;
    }

    .action {
      margin-top: 25px;
      justify-content: center;
      .save {
        user-select: none;
        background-color: #07c160;
        border-radius: 10px;
        height: 40px;
        width: 140px;
        line-height: 40px;
        color: #ffffff;
        text-align: center;
        cursor: pointer;
      }
    }
  }
</style>
